import React, {FC, useEffect, useState } from "react"
import './teacherPersonCenter.less'
import {Tabs,Input,Form,Button,Radio } from 'antd'
import { UserOutlined, MobileOutlined, createFromIconfontCN } from "@ant-design/icons"
import {teacherLogin, teacherprofile} from '@/services'
import { NavLink } from "react-router-dom"
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2598539_jiep61leuqk.js', 
});


const TeacherPersonCenter:FC = () => {
    const { TabPane } = Tabs;
    const [teacherlogin, setteacherlogin] = useState('') as any
    const [teacherblanList, setteacherblanList] = useState('') as any
    useEffect(() => {
        teacherLogin().then(res=>{
            if(res.code == 200){
                setteacherlogin(res.user)
            }
        })
        teacherprofile().then(res=>{
            if(res.code == 200){
                setteacherblanList(res.data)
            }
        })
    }, [])
    // let res = teacherblanList.userName
    // console.log(teacherblanList.userName,'111')
    const onFinish = (values: any) => {
      console.log('Finish:', values);
    };
    // function settitle(e:any){
    //     settitles(e.target.value) 
    // }
    return (
        <div className='teacherPersonCenter'>
            <div className='teacher_center'>
                <div className='teacher_center_left'>
                    <div className='teacher_left_tou'><span>个人信息</span></div>
                    <div className='teacher_left_wei'>
                        <div className='teacher_wei_img'>
                            <img src={'http://111.203.59.61:8060'+teacherlogin.avatar} alt="" />
                        </div>
                        <div className='teacher_wei_title'>
                            <ul className="list_group">
                                <li className="list_group_item">
                                    <div className="pull_left"><UserOutlined />用户名称</div>
                                    <div className="pull_right">{teacherlogin.userName}</div>
                                </li>
                                <li className="list_group_item">
                                    <div className="pull_left"><MobileOutlined />手机号码</div>
                                    <div className="pull_right">{teacherlogin.phonenumber}</div>
                                </li>
                                <li className="list_group_item">
                                    <div className="pull_left"><MyIcon type="icon-youxiang" />用户邮箱</div>
                                    <div className="pull_right">{teacherlogin.email}</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className='teacher_center_right'>
                    <div className='teacher_right_tou'><span>基本资料</span></div>
                    <div className='teacher_right_wei'>
                    <Tabs defaultActiveKey="1">
                        <TabPane tab="基本资料" key="1">
                            <Form name="horizontal_login" onFinish={onFinish}
                                initialValues={{
                                    userName:teacherblanList.userName,
                                    phonenumber:teacherblanList.phonenumber,
                                    email:teacherblanList.email,
                                    sex: teacherblanList.sex,
                                }}
                                >
                                <div className="form_item_form_item_div">
                                    <span className="form_item_span2"> <i style={{color:'red'}}>*</i> 用户昵称</span>
                                    <Form.Item name="userName"  className="form_item_span" rules={[{ required: true }]}>
                                        {/* {
                                            teacherblanList('userName',{
                                                rules: [{ required: true, message: 'Please input country!' }],
                                                initialValues:teacherblanList.userName
                                            })(
                                                <Input type="userName" className='from_item_input' />
                                            )
                                        } */}
                                        <Input type="userName" className='from_item_input' value={teacherblanList.userName} onChange={e=>{
                                            teacherblanList.userName=e.target.value
                                        }}/>
                                    </Form.Item>
                                </div>
                                <div className="form_item_form_item_div">
                                    <span className="form_item_span2"> <i style={{color:'red'}}>*</i> 手机号码</span>
                                    <Form.Item name="phonenumber">
                                        <Input type="phonenumber"  className='from_item_input' />
                                    </Form.Item>
                                </div>
                                <div className="form_item_form_item_div" >
                                    <span className="form_item_span2"><i style={{color:'red'}}>*</i> 邮箱</span>
                                    <Form.Item name="email">
                                        <Input type="email" className='from_item_input' />
                                    </Form.Item>
                                </div>
                                <div className="form_item_form_item_div">
                                    <span className="form_item_span3"> <i style={{color:'red'}}>*</i> 性别</span> 
                                    <Form.Item name="sex">
                                        <Radio.Group>
                                            <Radio value='0'>男</Radio>
                                            <Radio value='1'>女</Radio>
                                        </Radio.Group>
                                    </Form.Item>
                                </div>
                                <div  className="form_item_form_item_div">
                                    <Form.Item>
                                        <Button className="form_item_button" type="primary" htmlType="submit">保存</Button>
                                        <div className="form_item_div"><NavLink to='/teachers/needHandle'>关闭</NavLink></div>
                                    </Form.Item>
                                </div>
                                
                            </Form>
                        </TabPane>
                        <TabPane tab="修改密码" key="2">
                            <Form name="horizontal_login" onFinish={onFinish}>
                                <div className="form_item_form_item_div">
                                    <span className="form_item_span2"> <i style={{color:'red'}}>*</i> 旧密码</span>
                                    <Form.Item name="oldPassword" className="form_item_span">
                                        <Input type="oldPassword" className='from_item_input' />
                                    </Form.Item>
                                </div>
                               <div className="form_item_form_item_div">
                                    <span className="form_item_span2"> <i style={{color:'red'}}>*</i>新密码</span>
                                    <Form.Item name="newPassword">
                                        <Input type="newPassword" className='from_item_input' />
                                    </Form.Item>
                               </div>
                               <div className="form_item_form_item_div">
                                    <span className="form_item_span2"><i style={{color:'red'}}>*</i>确认密码</span>
                                    <Form.Item name="password">
                                        <Input type="password" className='from_item_input' />
                                    </Form.Item>
                               </div>
                                <div className="form_item_form_item_div">
                                    <Form.Item>
                                        <Button className="form_item_button" type="primary" htmlType="submit">保存</Button>
                                        <div className="form_item_div"><NavLink to='/teachers/needHandle'>关闭</NavLink></div>
                                    </Form.Item>
                                </div>
                            </Form>
                        </TabPane>
                    </Tabs>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default TeacherPersonCenter